<script setup lang="ts">

import { getPropertyAPI } from '@/apis/property';
import type { GetPropertyParamsType, PropertyType } from '@/types/property';
import { ref, watch } from 'vue';

// 请求列表参数
const getPropertyParams = ref<GetPropertyParamsType>({
  page: 1,
  pageSize: 5,
  enterpriseName: '',
  start: undefined,
  end: undefined
})

// 计算日期
const dateComputed = ref<string[]>()
watch(dateComputed, (newValue) => {
  if (newValue) {
    getPropertyParams.value.start = newValue[0]
    getPropertyParams.value.end = newValue[1]
  } else {
    getPropertyParams.value.start = undefined
    getPropertyParams.value.end = undefined
  }
})

// 请求列表数据
const propertyList = ref<PropertyType[]>([])
const total = ref<number>(0)

const getPropertyData = async () => {
  const res = await getPropertyAPI(getPropertyParams.value)
  propertyList.value = res.data.rows
  total.value = res.data.total
}
getPropertyData()
</script>

<template>
  <div class="building-container">
    {{ getPropertyParams }}
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">企业名称：</div>
      <el-input @clear="getPropertyData()" v-model="getPropertyParams.enterpriseName" clearable placeholder="请输入内容"
        class="search-main" />
      <div class="search-label" style="margin-left: 20px;">缴费时间：</div>
      <div class="search-main" style="width: 350px; display: flex;">
        <el-date-picker v-model="dateComputed" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="YYYY-MM-DD" />
        <!-- :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" -->
        <el-button type="primary" style="width: 15%; margin-left: 20px;" @click="getPropertyData()">查询</el-button>

      </div>
    </div>
    <div class="create-container">
      <el-button type="primary">添加账单</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="propertyList">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column label="账单编号" prop="billNumber" width="180" />
        <el-table-column label="企业名称" prop="enterpriseName" width="180" />
        <el-table-column label="租赁楼宇" prop="buildingName" />
        <el-table-column label="物业费(元/m²)" prop="propertyFeePrice" />
        <el-table-column label="账单金额(元)" prop="paymentAmount" />
        <el-table-column label="缴费时间" prop="createTime" width="200" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="primary" link>查看</el-button>
            <el-button size="small" type="primary" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[2, 5, 10, 20]" :total="total"
        v-model:current-page="getPropertyParams.page" v-model:page-size="getPropertyParams.pageSize"
        @change="getPropertyData()" />
    </div>

    <el-dialog title="添加合同" width="580px">
      <div class="form-container">
        <!-- 表单区域 -->
        <el-form ref="addFormRef" label-position="top">
          <el-form-item label="租赁楼宇" prop="buildingId">
          </el-form-item>
          <el-form-item label="租赁起止日期" prop="endTime">
          </el-form-item>
          <el-form-item label="租赁合同" prop="contractUrl">

          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button>取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.son-table {
  // background-color: #f4f6f8;
  margin-left: 47px;
}

.building-container {
  padding: 20px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
</style>
